<template lang="html">
  <div class="freeget">
    <div class="f-banner">
      <div class="bg">
        <img class="max" src="/static/new/free_get/free_img_head_banner@2x.png">
      </div>
      <router-link class="btn " :to="{ path: '/NewProList?classId=2' }">
        <img class="max heartBeat" src="/static/new/free_get/free_but_buy@2x.png">
      </router-link>
    </div>
    <div class="f-content">
      <div class="f-head">
        <img class="max" src="/static/new/free_get/free_img_title_instrument@2x.png">
      </div>
      <ul class="items" v-if="list && list.length > 0">
        <li class="item" v-for="(i, idx) in list" :key="i.id">
          <div @click="routeTo('/goodslist_detail?id='+i.id+'&gettypeDetail=gettypeDetail')" class="pic">
            <img class="max" :src="i.photo">
          </div>
          <div class="info">
            <div class="title">
              {{ i.nickname }}
            </div>
            <div class="box">
              <div class="box-progress">
                <p v-if="(i.self_buy_send - i.recordmain.self_valid) <= 0">可领取仪器</p>
                <p v-else>您还需累计购买{{ i.self_buy_send - i.recordmain.self_valid }}个套盒</p>
                <div class="progress">
                  <mt-progress v-if="i.recordmain.self_valid/i.self_buy_send*100 >= 100" :value="100" :bar-height="8"></mt-progress>
                  <mt-progress v-else :value="i.recordmain.self_valid/i.self_buy_send*100" :bar-height="8"></mt-progress>
                </div>
              </div>
              <div class="box-icon" v-if="(i.self_buy_send - i.recordmain.self_valid) <= 0" @click="routeTo('/goodslist_detail?id='+i.id+'&gettype=self_machine'+'&getnum='+parseInt(i.recordmain.self_valid/i.self_buy_send))">
                <img class="max heartBeat" src="/static/new/free_get/free_but_gift_clickable@2x.png">
              </div>
              <div class="box-icon" v-else>
                <img class="max" src="/static/new/free_get/free_but_gift_dis@2x.png">
              </div>
            </div>
            <div class="box">
              <div class="box-progress">
                <p v-if="(i.sub_buy_send - i.recordmain.sub_valid) <= 0">可领取仪器</p>
                <p v-else>您的下级还需累计购买{{ i.sub_buy_send - i.recordmain.sub_valid }}个套盒</p>
                <div class="progress">
                  <mt-progress v-if="i.recordmain.sub_valid/i.self_buy_send*100 >= 100" :value="100" :bar-height="8"></mt-progress>
                  <mt-progress v-else :value="i.recordmain.sub_valid/i.self_buy_send*100" :bar-height="8"></mt-progress>
                </div>
              </div>
              <div class="box-icon" v-if="(i.sub_buy_send - i.recordmain.sub_valid) <= 0" @click="routeTo('/goodslist_detail?id='+i.id+'&gettype=sub_machine'+'&getnum='+parseInt(i.recordmain.sub_valid/i.self_buy_send))">
                <img class="max heartBeat" src="/static/new/free_get/free_but_gift_clickable@2x.png">
              </div>
              <div class="box-icon" v-else>
                <img class="max" src="/static/new/free_get/free_but_gift_dis@2x.png">
              </div>
            </div>
          </div>
        </li>
      </ul>
      <div class="no-data" v-else>
        暂无数据~
      </div>
    </div>
  </div>
</template>

<script>
import { getFreeMachine } from '@/api/freeget'

export default {
  data() {
    return {
      list: null,
    }
  },
  created() {
    this.getFreeMachine();
    document.title = '免费领取仪器'
  },
  methods: {
    getFreeMachine() {
      getFreeMachine({
        uid: this.getUserInfo().id
      }).then((res)=>{
        this.list = res.data;
        console.log(res)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.freeget{
  background-color: #FF6250;
  padding-bottom: .6rem;
  .f-banner{
    position: relative;
    padding-bottom: .6rem;
    padding-top: .6rem;
    width: 90%;
    margin: 0 auto;
    .btn{
      position: absolute;
      left: 50%;
      bottom: .6rem;
      width: 4.4rem;
      margin-left: -2.2rem;
      animation-iteration-count: infinite;
    }
  }
  .f-content{
    background-color: #fff;
    margin: 0 .5rem;
    border-radius: .1rem;
    position: relative;
    margin-top: .8rem;
    .f-head{
      width: 6rem;
      margin: 0 auto;
      margin-top: -.7rem;
      position: absolute;
      left: 50%;
      margin-left: -3rem;
    }
    .items{
      padding-top: 1.6rem;
      overflow: hidden;
    }
    .item{
      margin: 0 .5rem;
      padding-bottom: .5rem;
      margin-bottom: .7rem;
      border-bottom: 1px dotted #ddd;
      overflow: hidden;
      .title{
        padding-bottom: .2rem;
        font-weight: bold;
      }
      .pic{
        width: 30%;
        float: left;
        padding-top: .3rem;
      }
      .info{
        width: 67%;
        margin-left: 3%;
        float: right;
        .box{
          overflow: hidden;
          position: relative;
          margin-bottom: .3rem;
          p{
            font-size: .26rem;
            color: #666666;
            margin-bottom: .1rem;
          }
          .box-progress{
            width: 88%;
            float: left;
          }
          .box-icon{
            width: 20%;
            position: absolute;
            right: -0rem;
            top: .1rem;
          }
        }
      }
    }
  }
  .heartBeat{
      animation-iteration-count: infinite;
  }
}
.no-data{
  padding: 2rem 0;
  text-align: center;
  color: #888;
}
</style>
<style lang="scss">
  .freeget{
    .mt-progress{
      height: 20px;
      line-height: 20px;
      width: 92%;
    }
    .mt-progress-progress{
      background-color: #FF6150;
      border-radius: .1rem;
      box-shadow: 0 0 8px #c0bfbf;
    }
    .mt-progress-runway{
      border-radius: .1rem;
    }
  }
</style>
